<template>
    <div>
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list :immediate-check="false" offset="50" v-model="loading" :finished="finished" finished-text="没有更多了"
                @load="onLoad">
                <ArticleItem v-for="item in list" :key="item.art_id" :artObj="item"></ArticleItem>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script>
    import { getArticlesAPI } from '@/api'
    import ArticleItem from './ArticleItem.vue'
    export default {

        data() {
            return {
                list: [],
                loading: false,
                finished: false,
                theTime: (new Date()).getTime(),
                refreshing: false,
            };
        },
        //获取相应文章列表
        async created() {
            this.getArticlesFn()
        },
        props: {
            channelId: Number
        },
        components: { ArticleItem },
        methods: {
            // 发送获取文章请求
            async getArticlesFn(){
                const res = await getArticlesAPI({
                    channel_id: this.channelId,
                    timestamp: this.theTime
                })
                this.list = [...this.list, ...res.data.data.results]
                this.theTime = res.data.data.pre_timestamp

                this.loading = false
                if (res.data.data.pre_timestamp === null) {
                    this.finished = true
                    return
                }

                this.refreshing= false
            },
            // 底部加载
            async onLoad() {
                this.getArticlesFn()         
            },
            // 下拉刷新
            async onRefresh() {
                this.list = []
                this.theTime = (new Date()).getTime()
                this.getArticlesFn()        
            },


        },
    };
</script>

<style scoped>

</style>